<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> {{copyTypeInfo.from == 1?'主页分析':'网络提取'}}</text>
		</view>
		<block v-if="status==1">




			<view class="textarea-box margin-top_60rpx">
				<textarea placeholder-style="font-size:30rpx;" v-model="copywriting"
					placeholder="请复制带有口播语音说话的爆款短视频链接粘贴到这里进行解析。（注:因视频无语音解析失败不退算力）" maxlength="500"
					style="height: 100%;" />
			</view>

			<view class="">
				<view class="v-title flex-align-center">
					<text></text>
					<view>视频要求</view>
				</view>
				<view v-if="faddish_notice" style="margin: 30rpx 20rpx; 0 20rpx" class="v-padding-center ">
					<uv-parse class="" :content="faddish_notice" :selectable="true"></uv-parse>
				</view>
			</view>

			<view class=" flex" :class="copywriting?'c-but':'c-butb'" @click="but()">提取视频文案
				{{'('+"算力："+tallySet.extract_tally+')'}}
			</view>

			<view class="height80">

			</view>
		</block>

		<view v-if="status==2" class=" margin-top_60rpx " style="">
			<view class="flex videoMsak">
				<video id="myVideo" :show-center-play-btn="false" :src="videoShowUrl"
					:poster="videoShowUrl + '?x-oss-process=video/snapshot,t_1000,f_jpg,m_fast'"
					style="width:620rpx;height: 1100rpx;border-radius: 20rpx;" @pause="pauseFn">
				</video>
				<view v-if="maskBol" class="mask" @click="ckMask()">

				</view>
				<view v-if="maskBol" @click="ckMask()">
					<image class="pauseImg" :src="pauseTwo" mode=""></image>
				</view>

				<view class="" @click="longpress(videoShowUrl)">
					<!-- <image class="downLoadBlueImg" :src="downLoadBlueTwo" mode=""></image> -->

				</view>
			</view>

			<view class="flex margin-top_40rpx " style="color:#333333 " @click="paste(videoShowUrl)">

				<image class="copyImg" :src="copyBlueTwo" mode=""></image>
				<text style="color: #0039F9;font-size: 26rpx;"> 复制链接</text>
			</view>

			<view class="c-but flex" @click="NetworkExtraction()">提取文案 </view>
		</view>



		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>任务标题</text>
						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="card margin-bottom_50rpx">
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" type="text" v-model="name" placeholder="请输入任务标题" />
							</view>


						</view>

					</view>

					<view class="PublishTags flex" @click="payNow()">
						一键分析
					</view>

				</view>

			</template>
		</sunui-popup>
	</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				copyBlueTwo: this.$imgs.copyBlueTwo,
				downLoadBlueTwo: this.$imgs.downLoadBlueTwo,
				pauseTwo: this.$imgs.pauseTwo,
				status: 1,
				videoShowUrl: '',
				navTop: '',

				materialBg: this.$imgs.violet,
				copywriting: '',
				videoContext: '',
				maskBol: true,
				name: '',
				id: '',
				copyTypeInfo: {},
				//  1. 已经编辑 直接分析 2.
				analysis: 1,
				timer: '',
				content: '',

				tallySet: uni.getStorageSync('tallySet'),
				user: uni.getStorageSync('user'),
				faddish_notice: '',
				memberSetObj: {}


			}
		},

		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			// 分析文案成功 没有掉 视频声音分离
			this.userInfos()
			this.tallySetFn()
			this.faddishNotice()
			this.memberSetFn()

			if (options.objs) {
				this.copyTypeInfo = JSON.parse((decodeURIComponent(options.objs)));

				if (this.copyTypeInfo.id) {
					this.copywriting = this.copyTypeInfo.url
					this.name = this.copyTypeInfo.name
					this.id = this.copyTypeInfo.id
					this.analysis = 2
				}

				// 主页来分享
				if (this.copyTypeInfo.from == 1) {
					this.copyTypeInfo = JSON.parse((decodeURIComponent(options.objs)));

					this.copywriting = this.copyTypeInfo.url


				}
			}




		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onHide() {
			console.log('页面隐藏')
			clearInterval(this.timer);




		},
		// 监听页面卸载
		onUnload() {
			console.log('页面隐藏')
			clearInterval(this.timer);




		},
		computed: {


		},
		methods: {
			async faddishNotice() {
				const result = await this.$http.get({
					url: this.$api.clipSet,

				});
				if (result.errno == 0) {
					console.log(result.data.faddish_notice)
					this.faddish_notice = result.data.faddish_notice


				}
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			async longpress(urls) {


				uni.showLoading({
					title: '下载中',
					mask: true,
				});
				uni.downloadFile({
					url: urls,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: r => {
									uni.hideLoading();

									this.$sun.toast('保存视频成功');
								},
								fail: e => {
									// console.log(res);
									if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail auth deny'
									) {

										uni.showModal({
											title: '您需要授权相册权限',
											success(res) {
												if (res
													.confirm) {
													uni.openSetting({
														success(
															res
														) {},
														fail(
															res
														) {
															// console.log(res);
														}
													});
												}
											}
										});
									} else if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail file not exists'
									) {

										uni.hideLoading();
										this.$sun.toast(
											'保存失败,视频文件不存在!', 'none'
										);
									} else {

										uni.hideLoading();
										console.log('err==>', e);
										this.$sun.toast('保存失败',
											'error');
									}
								}
							});
						} else {

							uni.hideLoading();
							this.$sun.toast('下载失败', 'error');
						}
					},
					fail: err => {
						uni.hideLoading();
						this.$sun.toast(err, 'error');
						this.isWhether = true;
					}
				});


			},
			paste(item) {
				uni.setClipboardData({
					data: item,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '复制链接成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log(err)
						// 复制失败的回调
						uni.showToast({
							title: '复制链接失败',
							icon: 'error'
						});
					}
				});


			},
			NetworkExtraction() {
				this.$sun.navGo('/pagesA/creatCenter/piecemeal/uploadStepsOne?obj=' + encodeURIComponent(JSON
					.stringify({
						content: [this.content],
						id: this.id
					})))
			},
			navBack() {
				this.$sun.navBack()
			},
			pauseFn() {
				this.maskBol = true
			},
			ckMask() {
				console.log(this.videoContext)

				this.videoContext.play()
				this.maskBol = false

			},
			closeWriteOffIcon() {
				clearInterval(this.timer);
				this.$refs.serviceItemsPopup.close()
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},
			but() {


				if (this.user.is_member == 0 && this.memberSetObj.is_open == 1) {
					uni.showModal({
						title: '温馨提示',
						content: '你当前不是会员，请开通会员后享受该功能',
						confirmText: '开通会员',
						confirmColor: '#4A5EFF',
						success: async (res) => {
							if (res.confirm) {


								this.$sun.navGo('/pages/contactUs/memberCenter')

							} else if (res.cancel) {

							}
						}
					});
				} else {
					if (!this.copywriting) {
						this.$sun.toast('请复制带有口播的链接', 'none');
					}

					this.$refs.serviceItemsPopup.show({
						anim: 'bottom',
						position: 'bottom',
						shadeClose: false, //false使用户不能点击其它关闭页面
						topclose: false,
						zIndex: 99999
					});
				}







			},





			async payNow() {
				// uni.showLoading({
				// 	title: '加载中...',
				// 	mask: true
				// });


				if (!this.name) {
					this.$sun.toast('请输入标题', 'none')
					return
				}
				this.$refs.serviceItemsPopup.close()
				uni.showLoading({
					title: '提取分析中...',
					mask: true
				});

				// if (!this.videoShowUrl) {
				// 	this.$sun.toast('请上传视频后在提交', 'none')
				// 	return
				// }


				const result = await this.$http.post({
					url: this.$api.faddishSave,
					data: {
						uid: uni.getStorageSync('uid'),
						name: this.name,
						type: 2,
						url: this.copywriting,
						from: this.copyTypeInfo.from ? this.copyTypeInfo.from : '0'



					}
				});

				if (result.errno == 0) {

					uni.hideLoading()
					console.log(result.data)

					
                     	this.$sun.navTo('/pagesA/creatCenter/HotSelling/HotSellingList')


	

					// if (result.data.video) {
					// 	// this.status = 2
					// 	// this.id = result.data.id

					// 	// this.videoShowUrl = result.data.video
					// 	// this.content = result.data.content
					// } else {
					// 	// this.$sun.navGo('/pagesA/creatCenter/piecemeal/uploadStepsOne?obj=' + encodeURIComponent(JSON
					// 	// 	.stringify({
					// 	// 		content: [result.data.content],
					// 	// 		id: result.data.id
					// 	// 	})))
					// }






				} else {
					uni.hideLoading()
					this.$sun.toast(result.message, 'none')
				}
				// if (result.errno == 0) {


				// 	console.log(result.data)
				// 	uni.hideLoading()

				// 	this.id = result.data.id

				// 	// this.faddishResult(result.data.id)
				// 	this.$refs.serviceItemsPopup.close()

				// 	this.faddishResult()

				// } else {
				// 	uni.hideLoading()
				// 	this.$sun.toast(result.message, 'none')
				// }




			},
			





			async faddishResult() {
				clearInterval(this.timer);
				const result = await this.$http.post({
					url: this.$api.faddishResult,
					data: {
						uid: uni.getStorageSync('uid'),
						task_id: this.id,

					}
				});
				if (result.errno == 0) {
					// accompaniment: "https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/Q5gU-1750754755_accompaniment.wav"
					// content: "九十九元五斤的小龙虾个头也是不小的有喜欢吃小龙虾的可以过来尝试一下"
					// vocals: "https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/Q5gU-1750754755_vocals.wav"
					this.$refs.serviceItemsPopup.close()
					console.log(result.data)
					this.$sun.navGo('/pagesA/creatCenter/piecemeal/uploadStepsOne?obj=' + encodeURIComponent(JSON
						.stringify({
							...result.data,
							id: this.id
						})))

					clearInterval(this.timer);

				} else if (result.errno == -1) {

					clearInterval(this.timer);
					this.$sun.toast(result.message, 'none')

					// if(result.message=='分析中，请等待刷新'){
					// 	this.timer = setInterval(() => {
					// 		this.faddishResult();
					// 	}, 3000);
					// }
				} else {
					this.$sun.toast(result.message, 'none')

					this.timer = setInterval(() => {
						this.faddishResult();
					}, 4000);
				}
			},


		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff !important;
	}

	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #fff !important;

		height: 100vh;
		padding: 20rpx;
		position: relative;

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}

		.videoMsak {
			position: relative;


			.mask {

				position: absolute;
				width: 620rpx;
				height: 1100rpx;
				top: 0;
				border-radius: 20rpx;
				background: rgba(0, 0, 0, 0.7);
				z-index: 99;
			}

			.pauseImg {
				position: absolute;
				z-index: 100;
				width: 85rpx;
				height: 85rpx;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.downLoadBlueImg {
				width: 55rpx;
				height: 55rpx;
				position: absolute;
				right: 70rpx;
				top: 24rpx;
				z-index: 99;
			}


		}

		.copyImg {
			width: 36rpx;
			height: 36rpx;
			margin-right: 15rpx;

		}


		// 多行文本
		.textarea-box {
			// width: 630rpx;
			border-radius: 20rpx;
			background: #fff;
			padding: 24rpx;

			height: calc(100vh - 1120rpx);

			.textarea-color {
				color: #999;
			}
		}

		.v-title {
			margin-top: 60rpx;
			// padding: 0rpx 26rpx 42rpx;

			text {
				width: 10rpx;
				height: 24rpx;
				border-radius: 138rpx;

				background: #7266FF;
			}

			view {
				margin-left: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.c-but {

			font-weight: 700;

			padding: 20rpx 40rpx;

			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 3%;
			border: none;

			z-index: 999;


			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(90deg, #6475FF, #7464FF 100%);
		}

		.c-butb {
			font-weight: 700;

			padding: 20rpx 40rpx;

			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 3%;
			border: none;

			z-index: 999;


			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;




			background: linear-gradient(82.59deg, rgb(100, 117, 255) 0.12%, rgb(116, 100, 255) 99.911%);
			opacity: 0.52;

		}


	}
</style>